<template>
	<div class="i__input-number">
		<span class="i__left" @click="minus">-</span>
		<span class="i__right" @click="plus">+</span>
		<input class="i__input" :value="value" />
	</div>
</template>

<script>
	import './utils/number.js'
	export default {
		name: 'input-number',
		props: {
			value: {
				type: Number
			},
			min: {
				type: [Number,Object],
				default: null
			},
			max: {
				type: [Number,Object],
				default: null
			},
			step: {
				type: Number,
				default: 1
			}
		},
		methods: {
			plus() {
				if(this.max !== null && this.value + this.step > this.max) return;
				this.$emit('input',this.value.add(this.step));
			},
			minus() {
				if(this.min !== null && this.value - this.step < this.min) return;
				this.$emit('input',this.value.subtr(this.step));
			}
		}
	}
</script>

<style>
	.i__input-number {
		margin-bottom: 5px;
		width: 100%;
		line-height: 26px;
		position: relative;
		display: inline-block;
	}

	.i__left,
	.i__right {
		width: 28px;
		font-size: 14px;
		position: absolute;
		z-index: 1;
		top: 1px;
		height: auto;
		text-align: center;
		background: #F5F7FA;
		color: #606266;
		cursor: pointer;
		line-height: 26px;
		user-select: none;
	}

	.i__left {
		left: 1px;
		border-radius: 4px 0 0 4px;
		border-right: 1px solid #DCDFE6;
	}

	.i__right {
		right: 1px;
		border-radius: 0 4px 4px 0;
		border-left: 1px solid #DCDFE6;
	}
	
	.i__left:hover,.i__right:hover{
		color: #409EFF;
	}

	.i__input {
		-webkit-appearance: none;
		background-color: #FFF;
		background-image: none;
		border-radius: 4px;
		border: 1px solid #DCDFE6;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		color: #606266;
		display: inline-block;
		font-size: inherit;
		outline: 0;
		padding: 0 15px;
		padding-left: 35px;
		padding-right: 35px;
		-webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
		transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
		width: 100%;
		font-size: 12px;
		height: 28px;
		line-height: 28px;
		text-align: center;
	}
	
	.i__input:focus{
		border-color: #409EFF;
	}
</style>
